<html>
  <HEAD>
 <SCRIPT type="text/javascript" src="js/jsonrpc.js"></SCRIPT>
    <script type='text/javascript' src='resources/dojo/dojo.js'></SCRIPT>

    <script type='text/javascript' src='resources/spring/Spring.js'></SCRIPT>

    <script type='text/javascript' src='resources/spring/Spring-Dojo.js'></SCRIPT>

    <SCRIPT type="text/javascript" src="remoting/ContactService"></SCRIPT>
    <link type="text/css" rel="stylesheet" href="resources/dijit/themes/tundra/tundra.css" />
    <script>
    var contactService = new ContactService();
    var url = 'remoting/ContactService';
    function saveContact()
    {
      var contact = new Contact();
      contact.firstName=dojo.query('#firstName')[0].value;
      contact.lastName=dojo.query('#lastName')[0].value;
      contact.phone=dojo.query('#phone')[0].value;
      contact.id=-1;
      contact.company=null;
      var options = new Object();
      options.onSuccess = saveContactSuccess;
      contactService.saveContact(contact, options);
    }
    var saveContactSuccess = function ()
    {
      var options = new Object();
      options.onSuccess = displayAllContacts;
      contactService.allContacts(options);
      
    }
    var displayAllContacts = function(data)
    {
      var contacts;
      eval("contacts = " + data);
      dojo.query('#contactAmount')[0].innerHTML=contacts.list.length;
      var contactListBody = dojo.query('#contactListBody')[0];
      contactListBody.innerHTML='';
      
      for(var i=0; i< contacts.list.length && i < 10; i++)
      {
        var contact = contacts.list[i];
        contactListBody.innerHTML=contactListBody.innerHTML+"<tr><td>"+contact.id+"</td><td>"+contact.firstName+"</td><td>"+contact.lastName+"</td><td>"+contact.phone+"</td></tr>";
      }
    }
   </script>

  </HEAD>
  <body>
    Find
    <input id="name" type="text">
    <input type="submit" />
    <div id="messages"></div>

    <form id="contact" onsubmit="return false;">
      <input id="firstName" type="text" />
      <input id="lastName" type="text" />
      <input id="phone" type="text" />
      <input type="submit" onclick="saveContact(this)" />
    </form>
    <span id="contactAmount"></span>
    <table id="contactList">
      <thead>
        <tr>
          <th width="25%">
            First Name
          </th>
          <th width="25%">
            Last Name
          </th>
          <th width="50%">
            Phone
          </th>
        </tr>
      </thead>
      <tbody id="contactListBody">
      </tbody>
    </table>
  </body>
</html>
